<template>

	<!-- 租房详情页面 -->

	<view>
		<view class="swiper-img">
			<u-swiper height='350' class="swiper-list" :autoplay="true" :list="pictureList" mode="round" duration="500" interval="3000"></u-swiper>
		</view>
		<view class="title-area">
			<view>
				<view class="title">{{ roomDetailList.roomTitle }}</view>
			</view>
			<u-icon style="margin-right: 25rpx;" :size="36" :name="recordClick? 'heart': 'heart-fill'" :color="recordClick ? '#000000': '#ff0000'" @click="roomRecord"></u-icon>
		</view>
		
		<view class="tag-list">
				<u-tag style="margin-right: 15rpx;" v-for="tag in tagList.slice(0, 4)" :text="tag.name" mode="light" />
		</view>
		
		<u-card :show-head="false" :show-foot="false" padding="0" margin="20rpx">
			<view slot="body">
			<!-- 	<view style="font-size: 36rpx;margin-top: 10rpx;margin-left: 10rpx;">
					<span>包含设备</span>
				</view> -->

				<u-row>
					<u-col :span="2" v-for="(item,index) in deviceList" :key="index">
						<view style="text-align:center; margin-top: 15rpx; width: 100%; padding: 10rpx 0;">
							<view style="margin: auto; width: fit-content;margin-bottom: 10rpx;">
								<u-image :src="item.image" mode="widthFix" width="50rpx" height="50rpx"></u-image>
							</view>
							<view class="grid-text">{{item.name}}</view>
						</view>
					</u-col>
				</u-row>
			</view>
		</u-card>

		<u-card :show-head="false" :show-foot="false" padding="0" margin="20rpx">
			<view class="hourse-detail" slot="body">
				<!-- <view style="font-size: 40rpx;margin-top: 10rpx;margin-left: 10rpx;">
					<span>房间详情</span>
				</view> -->
				<u-row>
					<u-col :span="6">
						<view class="detial-box">
							<span>朝向:</span>
							<span style="margin-left: 10rpx;">{{roomDetailList.roomTowards}}</span>
						</view>
						<view class="detial-box">
							<span>面积:</span>
							<span style="margin-left: 10rpx;">{{roomDetailList.roomArea}}</span>
						</view>
						<view class="detial-box">
							<span>楼层:</span>
							<span style="margin-left: 10rpx;">{{roomDetailList.roomLevel}}</span>
						</view>
					</u-col>
					<u-col :span="6">
						<view class="detial-box">
							<span>户型:</span>
							<span style="margin-left: 10rpx;">{{roomDetailList.roomType}}</span>
						</view>
						<view class="detial-box">
							<span>入住:</span>
							<span style="margin-left: 10rpx;">{{roomDetailList.roomTime}}</span>
						</view>
					</u-col>
				</u-row>
				
				<view class="rent-money-box">
					<span>租金:</span>
					<span style="margin-left: 10rpx;">{{roomDetailList.roomMoney}}</span>
				</view>
				<view style="margin-left: 40rpx;">
					<u-button type="primary" :customStyle="{'width': '70%','margin': 'auto','top': '20rpx'}"
					 shape="circle" @click="isShowOrder = true" style="">点此预约</u-button>
					<u-popup v-model="isShowOrder" mode="bottom" height="900rpx" :safe-area-inset-bottom="true">
						<order :data="{houseId: houseId,isShowOrder: isShowOrder}" @cancel="cancel"></order>
					</u-popup>
					<!-- <span style="margin-top: 10rpx;margin-left: 10rpx;">立即预约:</span>
					<u-row gutter="20">
						<u-col :span="4">
							<view style="margin-top: 10rpx; margin-left: 40rpx;">
								<img style="width: 200rpx;height: 180rpx;" src="../../static/admin2Code.jpg" mode=""></img>
							</view>
						</u-col>
						<u-col :span="8">
							<u-button type="primary" :customStyle="{'width': '50%','margin-left': '0','top': '20rpx'}" shape="circle" @click="isShowOrder = true" style="">点此预约
								<!-- <u-icon name="bell" :size="36"></u-icon> -->
							<!-- </u-button>
							<u-popup v-model="isShowOrder" mode="bottom" height="800rpx" :safe-area-inset-bottom="true">
								<order :data="{houseId: houseId,isShowOrder: isShowOrder}" @cancel="cancel"></order>
							</u-popup>
							
							<view style="margin-left: 10rpx; margin-top: 50rpx;width: 500rpx;height: 80rpx;text-align: left;font-size: 35rpx;">
								<span>联系电话：13627890743</span>
							</view> -->
							<!-- <view style="margin-left: 10rpx; width: 500rpx;height: 80rpx;text-align: left;color: #FF0000;">
								<span>快识别二维码 和管理员预约吧</span>
							</view> -->
					<!-- 	</u-col>
					</u-row> -->
				</view>
				<view style="margin-top: 30rpx; margin-left: 30rpx;font-size: 30rpx;">
					<span style="margin-top: 10rpx;">房间介绍：</span>
					<view style="margin-top: 10rpx;">
						<u-input placeholder=" " v-model="roomIntroduce" :disabled="true" type="textarea" :border="false" height="30" :auto-height="true">
						</u-input>
					</view>
				</view>
			</view>
		</u-card>

		<view v-if="dataList !== null" style="margin-left: 20rpx;">
			<guessYourLike :dataList="dataList"></guessYourLike>
		</view>

		<u-divider>已经到底了</u-divider>
	</view>
</template>

<script>
	import order from './order.vue'
	import config from '../../utils/config.js'
	import guessYourLike from './palte/guessYourLike.vue'
	export default {
		data() {
			return {
				tagList: [],
				recordClick: true,
				houseId: '',
				recommandId: '',
				houseInfo: {},
				isShowOrder: false,
				roomIntroduce: '',
				roomDetailList: {},
				deviceList: [],
				pictureList: [],
				dataList: null
			}
		},
		onLoad(option) {
			this.houseId = option.houseId
			this.recommandId = option.recommandId
			// console.log(this.recommandId)
			this.getDataList()
			this.getHouseInfoById()
			this.sendRecord()
		},
		onShow() {

		},
		methods: {
			cancel(res){
				this.isShowOrder = res
			},
			//收藏
			async roomRecord() {
				this.recordClick = !this.recordClick //true时为未点击状态
				//添加收藏
				if (!this.recordClick) {
					let res = await this.$request({
						url: '/v1/collection',
						method: 'POST',
						data: {
							"houseId": this.houseId,
							"userId": getApp().globalData.userId
						}
					})
					// console.log("成功收藏",res)
					wx.showToast({
						title: '收藏成功',
						icon: 'none',
						duration: 2000
					})
				} else {
					let res = await this.$request({
						url: '/v1/collection?houseId=' + this.houseId + '&userId=' + getApp().globalData.userId,
						method: 'DELETE',
					})
					// console.log("取消收藏",res)
					wx.showToast({
						title: '取消成功',
						icon: 'none',
						duration: 2000
					})
				}
			},
			//发送浏览记录
			async sendRecord() {
				let recordData = await this.$request({
					url: '/v1/browsing-history',
					method: 'PUT',
					data: {
						"houseId": this.houseId,
						"userId": getApp().globalData.userId
					}
				})

				// console.log("recordData", recordData)
			},
			//获取房屋的信息
			async getHouseInfoById() {
				let res = await this.$request({
					url: '/v1/house/' + this.houseId + '?userId=' + getApp().globalData.userId,
				})
				this.houseInfo = res.data
				// console.log(this.houseInfo)
				//是否收藏
				if(this.houseInfo.collection !== null){
					this.recordClick = false
				}
				//获取图片列表
				var picList = this.houseInfo.imageAddressList
				for (let i = 0; i < picList.length; i++) {
					let address = config.host + picList[i].address
					this.pictureList.push({
						"image": address
					})
				}
				//获取设备
				var device = this.houseInfo.deviceList
				for (let i = 0; i < device.length; i++) {
					let path = ''
					if (device[i].isHas === 0) {
						path = config.host + device[i].darkIcon
					} else {
						path = config.host + device[i].lightIcon
					}
					this.deviceList.push({
						"name": device[i].name,
						"image": path
					})
				}
				//获取房屋详细信息
				var house = this.houseInfo.house
				let roomTime = ''
				if(house.checkInTime !== null){
					roomTime = house.checkInTime.split("T")[0]
				}else{
					roomTime = '可随时入住'	
				}
			
				this.roomDetailList = {
					"roomTowards": house.toward,
					"roomArea": house.area,
					"roomLevel": house.floor,
					"roomType": house.doorModel,
					"roomTime": roomTime,
					"roomTitle": house.title,
					"roomMoney": house.price,
				}
				this.tagList = this.houseInfo.tagList
				this.roomIntroduce = house.description
			},
			//获取最新发布
			async getDataList() {
				let plateInfo = await this.$request({
					url: '/v1/plate/' + this.recommandId
				})

				var plateName = plateInfo.data.name
				let res = await this.$request({
					url: '/v1/house/list?plateId=' + this.recommandId + '&isApproved=1'
				})
				var houseInfo = res.data
				this.dataList = {
					"recommandId": this.recommandId,
					'isShowPlateName': true,
					"plateName": plateName,
					"houseInfo": houseInfo
				}
			},
			gotoDetail() {
				// console.info("点击")
				wx.navigateTo({
					// url: 'test?id=1&name=uapp'  c传递参数
					url: "/pages/components/buyDetail"
				})
			}

		},
		components: {
			order,
			guessYourLike
		}
	}
</script>

<style scoped>
	.tag-list {
		margin: 0 15rpx;
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
	}
	.title {
		font-size: 38rpx;
		font-weight: bold;
	}
	
	.title-area {
		margin: 15rpx;
		display: flex;
		justify-content: space-between;
	}
	.swiper_img {
		height: 400rpx;
		margin: 24rpx 10rpx 30rpx 0rpx;
	}
	
	.swiper-list {
		height: 400rpx;
	}

	.detial-box {
		margin-top: 10rpx;
		margin-left: 10rpx;
		font-size: 30rpx;
	}

	.rent-money-box {
		margin-top: 10rpx;
		margin-left: 20rpx;
		font-size: 35rpx;
		color: #FF0000;
	}

	.img {
		pointer-events: auto !important;
	}

	.hours-lists {
		margin-left: 10rpx;
		margin-top: 10rpx;
		height: 170rpx;
	}

	.img-list-box {
		height: 160rpx;
	}

	.img-list {
		height: 160rpx;
		width: 240rpx;
	}
</style>
